.root {
  display: flex;
  align-items: center;
  gap: var(--mantine-spacing-xl);
  margin-top: 50px;

  @media (max-width: em(700px)) {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mantine-spacing-md);
  }
}

.link {
  -webkit-tap-highlight-color: transparent;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  padding: var(--mantine-spacing-md);
  border-radius: var(--mantine-radius-md);

  @mixin light {
    color: var(--mantine-colors-black);
    background-color: var(--mantine-color-white);
    border: 1px solid var(--mantine-color-gray-3);

    @mixin hover {
      background-color: var(--mantine-color-gray-0);
    }
  }

  @mixin dark {
    color: var(--mantine-colors-white);
    background-color: var(--mantine-color-dark-6);
    border: 1px solid var(--mantine-color-dark-4);

    @mixin hover {
      background-color: var(--mantine-color-dark-5);
    }
  }
}

.body {
  &[data-next] {
    text-align: left;
    margin-right: var(--mantine-spacing-md);

    @mixin rtl {
      margin-right: 0;
      margin-left: var(--mantine-spacing-md);
      text-align: right;
    }
  }

  &[data-prev] {
    text-align: right;
    margin-left: var(--mantine-spacing-md);

    @mixin rtl {
      margin-left: 0;
      margin-right: var(--mantine-spacing-md);
      text-align: left;
    }
  }
}

.title {
  font-size: var(--mantine-font-size-lg);
}

.description {
  font-size: var(--mantine-font-size-sm);
}

.icon {
  width: 25px;
  height: 25px;

  @mixin rtl {
    transform: rotate(180deg);
  }
}
